.key-indicator {
    --padding: var(--grid-gap, 24px);

    @include sm-up {
        background-color: $blue-5;
    }

    margin: 24px calc(-1 * var(--padding));
    padding: var(--padding);

    .left {
        @include sm-only {
            margin-bottom: 16px;
        }
    }

    .indicator-metadata {
        margin-bottom: 16px;
        @include sm-only {
            display: none;
        }
    }

    .indicator-title {
        @include body-2-semibold;
        color: $blue-90;
        margin-right: 8px;
    }

    .indicator-source {
        @include body-3-medium;
        display: inline-block;
        color: $blue-50;
    }

    .narrative-title {
        font-size: 1.5rem;
        font-weight: 700;
        line-height: calc(28 / 22);
        color: $blue-90;
        margin-top: 0;
        margin-bottom: 16px;

        @include sm-only {
            font-size: 1.25rem;
        }
    }

    .text {
        @include body-2-regular;
        color: $blue-90;

        p:first-of-type {
            margin-top: 0;
        }

        p:last-of-type {
            margin-bottom: 0;
        }
    }

    .text a {
        @include owid-link-90;
    }

    .datapage-link {
        margin-top: 16px;
        display: inline-block;
    }

    .datapage-link-desktop {
        @include sm-only {
            display: none;
        }
    }

    .datapage-link-mobile {
        @include sm-up {
            display: none;
        }
    }

    .key-indicator-chart {
        height: $grapher-height;

        @include sm-only {
            order: -1;
            margin-bottom: 16px;
        }
    }
}
